<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>欢迎使用</title>
</head>
<body>
<div class="page-container">
	<p class="f-20 text-success">胆款流转实时监控管理系统 <span class="f-14">v1.0</span>后台</p>
	<div id="pieContainer" style="height: 300px"></div>
	<div id="lineContainer" style="height: 300px"></div>
</div>
<footer class="footer mt-20">

</footer>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> 
<script type="text/javascript" src="lib/echarts/echarts.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var param = {};
		var userInfo = getUserInfo();
		if(userInfo.company != null && userInfo.company.companyid != null && userInfo.company.companyid != '' && userInfo.company.companyid != undefined){
			param.companyid = userInfo.company.companyid;
		}
		
		//饼图
		var pieUrl = ipAddress + 'demo/cashboxStateReport/selectPieChartsData';
		$.get(pieUrl, param, function(data) {
			var userInfo = getUserInfo();
			var reports = data.reports;
			var steps = data.steps;
			var legendData = [];
			var seriesData = [];
			//获取数量
			for(var j = 0; j < steps.length; j ++){
				for(var i = 0; i < reports.length; i ++){
					if(reports[i].step != null && steps[j].stepid == reports[i].step) {
						seriesData[i] = {value:reports[i].num, name:"当前"+steps[j].stepname+"数量",id:steps[j].stepid};
					}
				}
			}
			//获取类型
			for(var j = 0; j < steps.length; j ++){
				legendData[j] = "当前" + steps[j].stepname + "数量";
			}
			initPieCharts(legendData, seriesData);
		});
		
		//折线图
		var lineUrl = ipAddress + 'demo/cashboxStateReport/selectLineChartsData';
		param.days = 30;
		$.get(lineUrl, param, function(data) {
			var userInfo = getUserInfo();
			var reports = data.reports;
			var steps = data.steps;
			var dates = data.dates;
			var legendData = [];
			var xAxisData = dates;
			var seriesData = [];
			//获取数量
			for(var j = 0; j < steps.length; j ++){
				var seriesItem = new Object();
				seriesItem.name = steps[j].stepname;
				seriesItem.type = 'line';
				seriesItem.stack = '数量' + j;
				var items = [];
				for(var k = 0; k < dates.length; k ++){
					var has = false;
					for(var i = 0; i < reports.length; i ++){
						var date = reports[i].scanTime != null ? reports[i].scanTime.substring(0, 10) : '';
						if(dates[k] == date && steps[j].stepid == reports[i].step){
							items[k] = reports[i].num;
							has = true;
						}
					}
					if(!has){
						items[k] = 0;
					}
				}
				seriesItem.data = items;
				seriesData[j] = seriesItem;
			}
			//获取类型
			for(var j = 0; j < steps.length; j ++){
				legendData[j] = steps[j].stepname;
			}
			console.log('legendData:');
			console.log(legendData);
			console.log('xAxisData:');
			console.log(xAxisData);
			console.log('seriesData:');
			console.log(seriesData);
			// for(var n = 0; n < xAxisData.length; n ++) {
			// 	var has = false;
			// 	for(var i = 0; i < reports.length; i ++){
			// 		if(reports[i].step != null) {
			// 			legendData[i] = "当前"+steps[(reports[i].step - 1)].stepname+"数量";
			// 			seriesData[i] = {value:reports[i].num, name:"当前"+steps[(reports[i].step - 1)].stepname+"数量",id:steps[(reports[i].step - 1)].stepid};
			// 		}
			// 	}
			// 	if(!has) {
			// 		sdata[k] = 0;
			// 		mdata[k] = 0.00;
			// 	}
			// }
			initLineCharts(legendData, xAxisData, seriesData);
		});
	});
	
	function initPieCharts(legendData, seriesData){
		var dom = document.getElementById("pieContainer");
		var myChart = echarts.init(dom);
		var app = {};
		var option = {
			title : {
				text: '胆箱流转实时状态示意图',
				subtext: '',
				x:'center'
			},
			tooltip : {
				trigger: 'item',
				formatter: function(params){
					//"{a} <br/>{c}个 ({d}%)"
					for (var i = 0; i < option.series[0].data.length; i++) {
					       if (option.series[0].data[i].name == params.name) {
							   var note = "";
							   if (option.series[0].data[i].id == "1") {//空胆入柜
								   note="从场站票胆间扫码接收空胆开始<br/>到空胆上运营车之前的阶段";
							   }
							   /* if (option.series[0].data[i].id == "2") {//空胆领取
							   		note="从场站实胆入柜扫码动作开始到物流接收实胆动作之前的阶段";
							   } */
							   if (option.series[0].data[i].id == "3") {//在途运营
							   		note="从空胆出柜上运营车开始的票胆在<br/>途运营使用阶段";
							   }
							   if (option.series[0].data[i].id == "4") {//实胆摘胆
							   		note="从公交车上扫码摘胆开始到实<br/>胆进入场站胆柜之前的阶段";
							   }
							   if (option.series[0].data[i].id == "5") {//实胆入柜
							   		note="从场站扫码实胆入柜开始到物<br/>流接收实胆之前的阶段";
							   }
							   if (option.series[0].data[i].id == "6") {//实胆运输
							   		note="物流人员从场站票胆间扫码接收实胆开始到<br/>清分中心人员接收实胆之前的阶段";
							   }
							   if (option.series[0].data[i].id == "7") {//实胆清点
							   		note="从清分中心扫码接收实胆开始到物流人员接收<br/>空胆之前的阶段，包含实胆清点和空胆驻场";
							   }
							   if (option.series[0].data[i].id == "8") {//空胆运输
							   		note="物流人员从清分中心扫码接收空胆开始到<br/>场站票胆间接收空胆之前的阶段";
							   }
							   
					           return note+"<br/>数量："+ option.series[0].data[i].value+ "个 ("+params.percent.toFixed(1)+"%)";
					       }
					   }
					
					//return "当前"+data.name + "数量:<br/>"+ data.name+ " : " + data.value + " ("+data.percent.toFixed(1)+"%)";
				}
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data: legendData
			},
			series : [
				{
					name: '库存个数',
					type: 'pie',
					radius : '50%',
					center: ['50%', '50%'],
					data:seriesData,
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	}
	
	function initLineCharts(legendData, xAxisData, seriesData){
		var dom = document.getElementById("lineContainer");
		myChart = echarts.init(dom);
		window.onresize = myChart.resize;
		var app = {};
		var option = {
		    title: {
		        text: '胆箱流转趋势状态示意图',
		        subtext: '（数量）'
		    },
		    tooltip: {
		    	trigger: 'axis'
		    },
		    legend: {
		        data:legendData
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: xAxisData
		    },
		    yAxis: {
		        type: 'value',
		        axisLabel: {
		            formatter: '{value} 个'
		        }
		    },
		    series: seriesData
		};
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
	}
</script>
<!--此乃百度统计代码，请自行删除-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?080836300300be57b7f34f4b3e97d911";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!--/此乃百度统计代码，请自行删除-->
</body>
</html>